<!DOCTYPE html>
<html lang="en" style="width:100%">
<head>
    <meta charset="UTF-8">
<!--    <name>图层配置</name>-->
    <script src="../../lib/jquery/jquery-3.5.1.min.js"></script>
    <link href="../../component/layui/css/layui.css" rel="stylesheet" />
    <link href="../../admin/css/pearCommon.css" rel="stylesheet" />
    <link href="./layerConfig.css" rel="stylesheet" />
    <style type="text/css">


    </style>
</head>
<body style="width:100%;overflow: hidden;">
<div id="head">
    <div style="color: white;font-size: 26px;margin-left: 35px;height:50px; line-height:50px; "> 图层管理</div>
</div>
<div id="content">
    <div id="left">
            <div id="list_item1">
                <a class="one_left" id="logo_layer"><img src="img/layer.png " style="position: relative; width:30px;margin:10px;"></a>
            </div>
    </div>

    <div id="c" style=" display: flex;">
            <iframe class="" id="layer_iframe" name="container" src="../../previewGeojson.html"  style="position: relative;width:100%;height:100%;border: none;margin-left: 50px;"></iframe>
        <div id="layer">
            <div id="layer_item1">
                <span style="position: relative; width:30px;margin-left:20px; font-size: 18px;">图层配置</span>
                <a class="logo_close" id="logo_close"><img src="img/mini.png " style="position: relative; width:30px;margin-left:150px;background-color:gray"></a>
                <hr style="height:1px;border:none;border-top:1px gray;" />
            </div>
            <div id="layer_item2">
                <div id="tree">
                    <fieldset class="layui-elem-field layui-field-name" style="margin-top: 10px;">
                        <a class="layer_add" id="layer_add"><img src="img/add.png " style="position: relative; width:20px;float:left; "></a>
                        <a class="layer_add" id="layer_delete"><img src="img/delete.png " style="position: relative; width:20px;float:right;"></a>
                        <legend>图层</legend>
                    </fieldset>
                </div>
                <div class="demo-tree" id="test7">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="site-text" id="service-window" style="margin: 5%; display: none"  target="test123">
    <form class="layui-form" id="service-add">
        <div class="layui-form-item">
            <label class="layui-form-label">图层名称</label>
            <div class="layui-input-block">
                <input autocomplete="off" class="layui-input" id="feature-name" lay-verify="required"  name="title" placeholder="请输入图层名称" required type="text">
                <div class="layui-form-mid layui-word-aux">必填项</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图层描述</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" id="feature-detail" name="desc" placeholder="请输入图层描述"></textarea>
            </div>
        </div>

        <div class="layui-form-item" id="research">
            <hr/>
            <label class="layui-form-label">要素名称    </label>
            <div class="layui-input-inline">
                <input class="layui-input" id="demoReload"  name="elementName" placeholder="" type="text">
            </div>
            <a class="pear-btn pear-btn-md pear-btn-primary" data-type="reload" id="featureSearch" lay-filter="user-query" lay-submit>
                <i class="layui-icon layui-icon-search"></i>
                查询
            </a>
<!--            <button type="reset" class="pear-btn pear-btn-md">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>-->
        </div>
        <div class="layui-form-item">
            <div class="layui-card">
                <div class="layui-card-body" id="user" >
                    <table id="user-table" lay-filter="user-table"></table>
                </div>
            </div>
        </div>
    </form>

</div>
<script id="data-type" type="text/html">
    {{#if (d.type == 1) { }}
    <span>3dTiles</span>
    {{# }else if(d.type == 2){ }}
    <span>geoJson</span>
    {{# }else if(d.type == 3){ }}
    <span>wms</span>
    {{# }else if(d.type == 4){ }}
    <span>wfs</span>
    {{# } }}
</script>
<script src="../../component/layui/layui.js"></script>
<script src="./layerConfig.js"></script>
<script>
    var layerConfigObj = {};
    var featureId;
    layui.use(['tree', 'util','table','form'], function(){
        let table = layui.table;
        let form = layui.form;
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util;

        tree.render({
            elem: '#test7'
            ,data: getData()
            ,id: 'treeId'
            ,showCheckbox: true  //是否显示复选框
            ,edit: ['add', 'update', 'del'] //操作节点的图标
            ,isJump: true //是否允许点击节点时弹出新窗口跳转
            ,click: function(obj){
                console.log(obj.data);
            },
            operate: function(obj){
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var id = data.id;
                if(type === 'add'){ //增加节点
                    layerConfigObj.add(id);
                }
                else if(type === 'update'){ //修改节点
                    layerConfigObj.update(data);
                }
                else if(type === 'del'){ //删除节点
                    layerConfigObj.del(data);
                }
            }
        });
        let cols = [
            [
                {type:'checkbox',align:'center'},
                // {title: '缩略图', field: 'username', align:'center', width:100},
                {title: '要素名称', field: 'elementName', align:'center'},
                {title: '要素格式', field: 'type', align:'center', templet:'#data-type'}
            ]
        ];


        table.render({
            elem: '#user-table',
            url: '/back/element/list',
            method: 'post',
            contentType: 'application/json',
            where: {},
            request: {
                pageName: 'pageNo' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "createTime": null,
                    "createBy": null,
                    "updateTime": null,
                    "updateBy": null,
                    "remark": null,
                    "code": 200,
                    "msg": "...",
                    "count": res.data.total,
                    "data":res.data.list
                }
            },
            id: 'user-table',
            page: true ,
            cols: cols ,
            skin: 'line',
            // even: true,//开启隔行背景
            // toolbar: '#user-toolbar',
            response: {
                statusCode: 200 //成功的状态码，默认：0
            },
        });

        table.on('checkbox(user-table)', function(obj){
            featureId=obj.data.id;
            // console.log(obj.checked); //当前是否选中状态
            // console.log(obj.data); //选中行的相关数据
            // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            // console.log(table.checkStatus('user-table').data); // 获取表格中选中行的数据
        });
        layerConfigObj.add = function(id){
            layer.open({
                type: 1,
                title: '添加图层',
                shade: 0.1,
                area: ['70%', '90%'],
                content: $('#service-window'),
                resize: true,
                btn: ['确定', '取消'],
                success:function(layero,index){
                    $('#feature-name').show();
                    $('#feature-detail').show();
                    $('#user').show();
                    $('#research').show();
                },
                yes:function(index,layero){
                    $.ajax({
                        url: "/back/layer",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json; charset=UTF-8",
                        data:JSON.stringify({
                            elementId:featureId,
                            isDir:'0',
                            parentId: id,
                            layerName: $('#feature-name').val(),
                            remark:$('#feature-detail').val(),
                            sort:0,
                            status:1
                        }),
                        success: function(data){
                            if(data.errorCode==0){
                                layer.alert('增加成功',{icon:1,title:'提示'},function(i){
                                    layer.close(i);
                                    layer.close(index);//关闭弹出层
                                });
                                tree.reload('treeId', {data: getData()});
                            }else{
                                layer.msg("添加失败", {icon: 5});
                            }
                        }
                    });
                }
            });
        };

        $('#featureSearch').on('click', function(){
            var active = {
                reload: function(){
                    var demoReload = $('#demoReload');
                    //执行重载
                    table.reload('user-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            elementName: demoReload.val()
                        }
                    }, 'data');
                }
            };
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        layerConfigObj.update = function(data){
            // console.log(data);
            $.ajax({
                url: "/back/layer",
                type: "PUT",
                dataType: "json",
                contentType: "application/json; charset=UTF-8",
                data:JSON.stringify({
                    elementId:data.elementId,
                    id:data.id,
                    isDir:data.isDir,
                    parentId: data.parentId,
                    layerName: data.title,
                    remark:data.remark,
                    sort:data.sort,
                    status:data.status
                }),
                success: function(result){
                    if(result.errorCode==0){
                        layer.alert('修改成功',{icon:1,title:'提示'});
                        tree.reload('treeId', {data: getData()});
                    }else{
                        layer.msg("修改失败", {icon: 5});
                    }
                }
            });
        };
        layerConfigObj.del = function(data){
            var idn = data.id;
            var arr = new Array(); //创建了一个长度为0的数组对象。
            arr.push(idn);
            // console.log(arr);
            $.ajax({
                url: "/back/layer?"+"id="+arr.join("&id="),
                type: "DELETE",
                dataType: "json",
                contentType: "application/json; charset=UTF-8",
                success: function(result){
                    if(result.errorCode==0){
                        layer.alert('删除成功',{icon:1,title:'提示'});
                        tree.reload('treeId', {data: getData()});
                    }else{
                        layer.msg("删除失败", {icon: 5});
                    }
                }
            });
        };
        function getData(){
            var data = [];
            $.ajax({
                url: '/back/layer/tree',
                dataType:'json',
                type:'get',
                async:false,
                success: function(result){
                    var treeData=result.data;
                    var stringTree=JSON.stringify(treeData);
                    var dataStr=stringTree.replace(/layerName/g,"title");
                    data= JSON.parse(dataStr);
                }
            });
            return data;
        }

        $('#layer_add').on('click', function(){
            layer.open({
                type: 1,
                title: '添加图层文件夹',
                shade: 0.1,
                area: ['50%', '50%'],
                content: $('#service-window'),
                resize: true,
                btn: ['确定', '取消'],
                success:function(layero,index){
                    $('#feature-name').show();
                    $('#feature-detail').show();
                    $('#user').hide();
                    $('#research').hide();
                },
                yes:function(index,layero){
                    $.ajax({
                        url: "/back/layer",
                        type: "POST",
                        data:JSON.stringify({
                            layerName: $('#feature-name').val(),
                            parentId:0,
                            isDir: 1,
                            sort: 0,
                            remark: $('#feature-detail').val(),
                            status: 1
                        }),
                        dataType: "json",
                        contentType: "application/json; charset=UTF-8",
                        success: function(data){
                            if(data.errorCode==0){
                                layer.alert('增加成功',{icon:1,title:'提示'},function(i){
                                    layer.close(i);
                                    layer.close(index);//关闭弹出层
                                });
                                tree.reload('treeId', {data: getData()});
                            }else{
                                layer.msg("添加失败", {icon: 5});
                            }
                        }
                    });
                }
            });
        });

    });
</script>
</body>

</html>

